<template>
	<div class="page-detail" v-loading = "loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/physical/physicalDetailList'}">实物帐户列表</el-breadcrumb-item>
			<el-breadcrumb-item>实物帐户详情</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 返回实物帐户明细 -->
		<div class="t_tab">

			<el-form class="form" label-width="180px" :model="info">
				<el-form-item label="序号">
					<span>{{info.supplierId}}</span>
				</el-form-item>
				<el-form-item label="投资人">
					<span>{{info.supplierContact}}</span>
				</el-form-item>
				<el-form-item label="投资产品">
					<el-table :data="info.productDtoList" border style="width: 100%">
						<el-table-column prop="goodsId" label="商品id">
						</el-table-column>
						<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="totalQty" label="投资总数量">
						</el-table-column>
						<el-table-column prop="residueQty" label="结存数量">
						</el-table-column>
						<el-table-column fixed label="商品图片" width="80">
							<template slot-scope="scope">
								<img class="list-goods-image" :src="scope.row.imgUrl" alt="scope.row.title" @mouseover="CtrlImg(scope.row,scope.$index)" @mouseleave="CtrlImg(scope.row,scope.$index)">
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="small"  @click="detailFun(scope.row)" type="success">查看明细</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
			<el-form v-show="detail" class="form" label-width="180px" :model="detailInfo">
				<el-form-item label="初期数量">
					<span>{{detailInfo.totalQty}}</span>
				</el-form-item>
				<el-form-item label="实物帐户明细">
					<span>{{detailInfo.goodsName}}</span>
				</el-form-item>
				<el-form-item label="成交数量">
					<span>{{detailInfo.dealQty}}</span>
					<span v-if="showCJ" @click="showCJFun" style="margin-left: 20px;color: #0062CC;cursor: pointer;">收起</span>
					<span v-else @click="showCJFun" style="margin-left: 20px;color: #0062CC;cursor: pointer;">展开</span>
					<el-table v-show="showCJ" :data="detailInfo.recordDtos" border style="width: 100%">
						<el-table-column prop="operateDate" label="成交日期">
						</el-table-column>
						<el-table-column prop="listNo" label="单据编号">
						</el-table-column>
						<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="supplierContact" label="买家">
						</el-table-column>
						<el-table-column prop="qty" label="数量">
						</el-table-column>
						<el-table-column prop="taxPrice" label="成交价">
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="结存数量">
					<span>{{detailInfo.residueQty}}</span>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="success">回购</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="ctrlBidImg">
			<i></i>
			<img id="show-img" />
		</div>

	</div>

</template>
<script>
import bear from '../../assets/images/bear.png';
export default {
	name: 'detail',
	data() {
		return {
			showCJ: true,
			detail : true,
			loading:false,
			info:'',
			detailInfo:{}
		}
	},
	mounted() {
		this.getDetail();
	},
	methods: {
		getDetail(){
			this.loading = true;
			this.$post("SEAccountDetail", {
				id: this.$route.params.id
			}).then(res => {
				this.loading = false;
				if(res.code == 200){
					this.info = res.data;
					this.detailInfo = res.data.productDtoList[0];
				}else{
					this.$msg.warning(res.message);
				}
			}).catch((e)=>{
				this.loading = false;
			})
		},
		showCJFun() {
			this.showCJ = !this.showCJ;
		},
		detailFun(info) {
			this.detailInfo = info;
		},
		to() {
			this.$router.back();
		},
		CtrlImg(item, index) {
			console.log(item, index);
			var ctrl = document.querySelector('#ctrlBidImg');
			ctrl.style.top = Number(110 + Number(index + 1) * 62) + 'px';
			ctrl.style.display = ctrl.style.display == 'block' ? 'none' : 'block';
			var img = document.querySelector('#show-img');
			img.src = item.pic_url;
		}
	}
}
</script>
<style lang="less">
.form {
  border-bottom: 1px solid #eee;
}

.page-detail {
  width: 1000px;
  .t_tab {
    border-top: 1px solid #eee;
    .t_title {
      color: #333;
      border-bottom: 1px solid #dddddd;
      overflow: hidden;
      line-height: 20px;
      span {
        float: left;
        color: #333;
      }
      .t_m {
        width: 135px;
        height: 32px;
        border: 1px solid #ff920b;
        border-radius: 4px;
        font-size: 12px;
        font-weight: normal;
        cursor: pointer;
        color: #fff;
        line-height: 32px;
        text-indent: 30px;
      }
    }
  }

  #ctrlBidImg {
    width: 240px;
    height: 240px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 600px;
    background-color: #fff;
    z-index: 100;
    border: #ddd solid 1px;
    display: none;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.06);
    i {
      border-width: 10px;
      border-color: transparent #ddd transparent transparent;
      border-style: solid;
      position: absolute;
      left: -20px;
      top: 65px;
    }
    #show-img {
      width: 100%;
      height: 100%;
    }
  }
  #ctrlBidImg::after {
    content: "";
    border-width: 10px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    position: absolute;
    left: -19px;
    top: 65px;
  }
}
</style>